<template>
    <el-row>
        <el-col style="margin-top: 100px;" :span="10" :offset="7">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <h3 style="margin-bottom: 0px;">管理员登录</h3>
                </div>
                 <el-alert title="用户名或密码错误" v-show="showErrorMsg" type="error"></el-alert>
                <el-form :model="loginInfo" ref="loginForm" :rules="rules" label-width="80px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input @focus="showErrorMsg = false" v-model.trim="loginInfo.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <span slot="label">密&nbsp;&nbsp;&nbsp;&nbsp;码</span>
                        <el-input @focus="showErrorMsg = false" type="password" v-model="loginInfo.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click.prevent="loginSubmit" style="width: 100%;" type="primary">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
import http from '@/core/httpRequest.js'
import util from '@/utils/parse.js'

export default {
    data() {
        return {
            showErrorMsg: false,
            loginInfo: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                   {required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        loginSubmit() {
            // this.$refs.loginForm 是 ref="loginForm"
            // validate() 执行校验，如果校验成功，valid的值为true; 如果不成功，返回false
            this.$refs.loginForm.validate(valid => {
                if(valid) {  // 表示校验成功
                    // axios 的post请求的请求头 Content-Type application/json

                    http.post('/admin/login', this.loginInfo)
                    // http.post('/auth/token', this.loginInfo)

                        .then(res => {
                            if(res.data.code > 0) {  // 登录成功
                                let tokens = res.data.data
                                let access_token = tokens.access_token
                                let refresh_token = tokens.refresh_token

                                // 将 access_token 和 refresh_token 都设置到cookie中
                                this.$cookies.set('access_token', access_token)
                                this.$cookies.set('refresh_token', refresh_token)

                                let payload = util.parseJwtClaim(access_token);

                                // 获取到用户名
                                let username = payload.sub

                                this.$cookies.set('username', username)

                                this.$router.push('/index')  // 编程式路由，跳转到首页
                            }else {
                                this.showErrorMsg = true
                            }
                        }) 
                }
            })
        }
    }
}
</script>

<style>

</style>